<template>
  <div>
    <el-tabs v-model="ActionTab">
      <el-tab-pane label="业务参数" name="base">
        <el-form
            :model="MiAssembleComponentsToSfc"
            size="mini"
            label-width="100px"
            label-position="left"
        >
          <el-form-item label="SFC" width="120px">
            <data-source-input
                :datasource-item="MiAssembleComponentsToSfc.NodeMes.DataSources[0]"
                :node-id="MiAssembleComponentsToSfc.NodeMes.DataSources[0].DataSourceId"
                :param-name="MiAssembleComponentsToSfc.NodeMes.DataSources[0].ParamName"
                @change="onSFCChange"
                null-message="请选择SFC来源/总成号等"
                style="max-width: 600px;width: 500px;margin-left: 6px"
            />
          </el-form-item>
          <el-form-item label="描述">
            <el-input
                v-model="MiAssembleComponentsToSfc.Desc"
                type="textarea"
                :rows="3"
                placeholder="请输入描述"
                style="width: 90%"
            ></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="基础参数" name="requestParams">
        <base-params-form></base-params-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts">

import DataSourceInput from "@/vue2-flow/src/views/flow/components/NodeInputSourceDataComponent.vue";
import BaseParamsForm from "@/vue2-flow/src/views/flow/NodeConfig/mes/BaseParamsForm.vue";
//@ts-ignore
import Utils from "@/vue2-flow/src/utils/Common.js";
import {onMounted, ref} from "vue";
import {useFlowStore} from "@/store/modules/flow/flowStore";
//@ts-ignore
import FlowNodeDataApi from "@/api/flow/FlowNodeDataApi.js";

const FlowStore = useFlowStore()

const ActionTab = ref('base')
const MiAssembleComponentsToSfc = ref({
  NodeMes: {
    DataSources: [{
      DataSourceId: '',
      ParamName: '',
      DataSource: ''
    }]
  },
  Desc: ''
})

const onSFCChange = (item: any) => {
  if (!Utils.IsEmpty(item)) {
    MiAssembleComponentsToSfc.value.NodeMes.DataSources[0].DataSourceId = item.nodeId
    MiAssembleComponentsToSfc.value.NodeMes.DataSources[0].ParamName = item.ParamName
    MiAssembleComponentsToSfc.value.NodeMes.DataSources[0].DataSource = item.DataSource
  }
}

const ShowNodeData = () => {
  const _node = FlowStore.CurrentClickNode
  const target = Utils.traverse(_node, [])
  // this.nodeInputParams = target
  SetFormValue(_node)
}

/**
 * 回显
 * @param _node
 * @constructor
 */
const SetFormValue = (_node: any) => {
  const _NodeMes = _node?.nodeInputParam
  if (!Utils.IsEmpty(_NodeMes)) {
    MiAssembleComponentsToSfc.value = _NodeMes
  }
}

/**
 * 保存配置
 * @param NodeName
 */
const _SaveNode = (NodeName: any) => {
  const _mes = MiAssembleComponentsToSfc.value
  new FlowNodeDataApi().Install(FlowStore.CurrentClickNode.id, _mes, NodeName)
}
onMounted(() => {
  ShowNodeData()
})

defineExpose({_SaveNode})
</script>

<style scoped lang="scss">

</style>
